import { Form, Input, Button, Checkbox } from 'antd';
import React, { useState, useEffect, useRef, FC } from 'react';
import { LoginForm } from '../login';
import { FormInstance } from 'antd/es/form';
import { connect, Dispatch, history } from 'umi';
// import { LoginEnum } from '@/utils/constant'
interface LoginProps {
  dispatch?: any;
}

const MobileLogin: FC<LoginProps> = ({ dispatch }) => {
  const [loginType, setLoginType] = useState<string>('2');
  const [fromData, setFormData] = useState<LoginForm>({
    username: '',
    password: '',
    remember: true,
  });
  const formRef = useRef<FormInstance>(null);

  // 发送短信
  const onFinish = (values: any) => {
    const { email, password, username } = values;

    const data = { email: values.username };
    // 邮箱登录
    dispatch({
      type: 'login/fetchEmiLogin',
      payload: { email, password },
    }).then((res: any) => {
      console.log(res, 'res');
    });
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('校验失败', errorInfo);
  };

  return (
    <Form
      initialValues={fromData}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      ref={formRef}
      style={{
        width: '500px',
        boxSizing: 'border-box',
        padding: '0 50px',
        backgroundColor: '#fff',
      }}
    >
      <h2 style={{ textAlign: 'center', margin: '50px 0' }}>登录</h2>
      {loginType == '1' && (
        <div>
          <Form.Item
            name="username"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input placeholder="请输入手机号" style={{ height: '48px' }} />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input
              placeholder="验证码"
              style={{ height: '48px' }}
              suffix={<a>忘记密码</a>}
            />
          </Form.Item>
        </div>
      )}
      {loginType == '2' && (
        <div>
          <Form.Item
            name="email"
            rules={[{ required: true, message: 'Please input your email!' }]}
          >
            <Input placeholder="请输入email" style={{ height: '48px' }} />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input
              placeholder="请输入密码"
              style={{ height: '48px' }}
              suffix={<a>忘记密码</a>}
            />
          </Form.Item>
        </div>
      )}

      {/* <Form.Item
        name="remember"
        valuePropName="checked"
        wrapperCol={{ offset: 8, span: 16 }}
      >
        <Checkbox>Remember me</Checkbox>
      </Form.Item> */}

      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

const mapState = (state: any) => {
  return { ...state };
};

export default connect(mapState)(MobileLogin);
